<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级管理</title>
    <link rel="stylesheet" href="../css/elementUI.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/elementUI.js"></script>
    <script src="../js/util.js"></script>
</head>
<body>
    <div id="app">
        <el-input placeholder="姓名" v-model="query.name" style="width: 180px;"
            clearable>
        </el-input>
        <el-button @click="toAdd">添加</el-button>
        <el-button @click="delAll">批量删除</el-button>
        <el-table
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55"
            >
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="班级名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="班级人数">
            </el-table-column>
            <el-table-column
                    prop="code"
                    label="班级号">
            </el-table-column>
            <el-table-column
                    prop="room"
                    label="班级房间号">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="toEdit(scope.row)">编辑</el-button>
                    <el-button size="mini"type="danger" @click="delOne(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.page"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="2"
                layout="total, sizes, prev, pager, next, jumper"
                :total="PageInfo.total">
        </el-pagination>

        <el-dialog :title="mode.title" :visible.sync="dialogFormVisible":before-close="closeForm">
            <el-form :model="form" >
                <el-form-item label="班级名称" :label-width="formLabelWidth" >
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="班级人数" :label-width="formLabelWidth" >
                    <el-input v-model="form.num" type="number" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="班级号" :label-width="formLabelWidth" >
                    <el-input v-model="form.code" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="班级房间号" :label-width="formLabelWidth" >
                    <el-input v-model="form.room" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</body>
    <script>
        new Vue({
            el:'#app',
            data:{
                tableData:[],
                form:{
                    name:'',
                    num:'',
                    code:'',
                    room:''
                },
                PageInfo:{},
                query:{
                    page:1,
                    size:2,
                    name:''
                },
                multipleSelection:[],
                formLabelWidth:'100px',
                dialogFormVisible:false,
                mode:{
                    url:'',
                    title:''
                }


            },
            watch:{
                query:{
                    deep:true,
                    handler(){
                        this.initData();
                    }
                }
            },
            methods:{
                delOne(id){
                  this.delReal(id);
                },
                delReal(ids){
                    this.$confirm('确认删除？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.get(`/grade/delAll.action?ids=${ids}`).then(res=>{
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.initData();
                        })

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                delAll(){
                  let ids=this.multipleSelection.map(g=>g.id);
                  this.delReal(ids);
                },
                toEdit(g){
                    this.form=JSON.parse(JSON.stringify(g));
                    this.mode={
                        url:'/grade/edit.action',
                        title:'修改班级'
                    }
                    this.dialogFormVisible=true;
                },
                add(){
                  axios.post(this.mode.url,this.form).then(res=>{
                      this.initForm();
                      this.initData()
                  })
                },
                toAdd(){
                    this.mode={
                        url:'/grade/add.action',
                        title:'添加班级'
                    }
                    this.dialogFormVisible=true;
                },
                initForm(){
                  this.form={
                      name:'',
                      num:'',
                      code:'',
                      room:''
                  }
                  this.dialogFormVisible=false;
                },
                closeForm(done){
                    this.initForm()
                  done()
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                handleSizeChange(val) {
                    this.query.size=val;
                },
                handleCurrentChange(val) {
                    this.query.page=val;
                },
                initData(){
                    axios.post(`/grade/findPage.action?page=${this.query.page}&size=${this.query.size}`,this.query).then(res=>{
                        this.tableData=res.data.list;
                        this.PageInfo=res.data;
                        if (this.tableData.length==0&&this.query.page>1){
                            this.query.page--;
                        }
                    })
                }
            },
            created(){
                this.initData()
            }
        })
    </script>
</html>